import '../../css/business/index.scss'
import cx from "classnames"
import item1 from '../../assets/image/business/item_1.png'
import item2 from '../../assets/image/business/item_2.png'
import item3 from '../../assets/image/business/item_3.png'
import item4 from '../../assets/image/business/item_4.png'
import item5 from '../../assets/image/business/item_5.png'
import item6 from '../../assets/image/business/item_6.png'
import zan from "../../assets/zan.png";

import Modal from "antd/lib/modal";

import Layout from "../../components/layout";
import api from "../../config/api";
import { Form, Input, Button,message } from 'antd';

const FormItem = Form.Item;
const { TextArea } = Input;

export class Index extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            activeKey: '1',
            visible:false,
        };
        this.listArr = [
            {
                title: '免租金',
                img: item1,
                content: '入驻即享租金全免。'
            },
            {
                title: '免装修',
                img: item2,
                content: '国家 E0 级环保装修，人机工程设施免费提供。'
            },
            {
                title: '招生保障',
                img: item3,
                content: '市场策划引流，免去招生烦恼。'
            },
            {
                title: '技术支持',
                img: item4,
                content: '豆壳自主研发“豆壳教育云”、“昂思系统”为入驻品牌提供技术支持，全面的数据接入，用户画像更明确。'
            },
            {
                title: '位置优势',
                img: item5,
                content: '辐射 2 公里范围内包含幼儿园、中小学，人口密度住宅区，交通便利，消费力优质。'
            },
            {
                title: '物业后勤',
                img: item6,
                content: '公共区域清洁维护、设备维护维修等物业后勤全方位服务支持。'
            },
        ]
    }
    submitHandler = () => {
        
        this.props.form.validateFields((err, values) => {
            if (!err) {
                values.type = this.state.activeKey == '1' ? '0': '1';
                 if(this.state.activeKey)
                ajax(api.application,{...values},'post').then((res={})=>{
                    if(res.status){
                        this.props.form.resetFields();
                        this.setState({
                            visible:true,
                        })
                    } else {
                        message.error('网络错误，请稍后再试')
                    }
                })
            }
        })
    }
    componentDidMount(){
        this.domEvent();
    }
    domEvent(){
		// $(window).scroll(function(e){
		// console.log(e);	
		// })
    }
    cancel = ()=>{
        this.setState({
            visible:false,
        })
    }
	componentWillUnmount(){
		$(window).unbind ('scroll');
	}
    render(){
        const { getFieldDecorator } = this.props.form;
        let {visible} = this.state;
        return(
            <Layout nav = "business" {...this.props}>
                <div className={'business'}>
                    <div className={'top-background'}>
                        <div className="title-wrapper">
                            <p className={'top-background-title'}>商业合作</p>
                            <div className={'white-tab'} />
                            <p className={'top-background-content'}>以豆壳之名  一起为未来而教</p>
                        </div>
                    </div>
                    <div className={'tab-container'}>
                        <p onClick={()=>{if(this.state.activeKey!='1'){this.props.form.resetFields()}this.setState({activeKey:'1'})}} className={this.state.activeKey == '1' ? cx("tab-text","tab-text-activeKey") : 'tab-text'}>品牌招募</p>
                        <span style={{width:99}}></span>
                        <p onClick={()=>{if(this.state.activeKey!='2'){this.props.form.resetFields()}this.setState({activeKey:'2'});this.props.form.resetFields()}} className={this.state.activeKey == '2' ? cx("tab-text","tab-text-activeKey") : 'tab-text'}>空间合作</p>
                    </div>
                    <div className={'detail-container'}>
                        <div className={'text-left-container'}>
                            {
                                this.state.activeKey == '1' ? <div>
                                    <div className={'first-item'}>
                                        <p className={'item-title'}>全球教育品牌招募</p>
                                        <p className={'item-detail'}>豆壳教育广场致力于为用户选好产品，并通过空间整体布局、运营全服务、市场策划引流、技术数据支持为产品提供增值服务能力，我们欢迎有优质教学产品的品牌入驻，豆壳将为入驻品牌带来业绩和品牌的提升。</p>
                                    </div>
                                    <div className={'first-item'}>
                                        <p className={'item-title'}>豆壳6项核心赋能矩阵</p>
                                        <div className={'item-list'}>
                                            {
                                                this.listArr.map((item, index) => {
                                                    return <div key={index} className={'item-list-element'} style={{ marginBottom: index != this.listArr.length - 1 ? 30 : 0 }}>
                                                        <img className={'item-list-element-img'} src={item.img} alt="" style={{ width: 40, height: 'auto' }} />
                                                        <div className={'item-list-element-detail'}>
                                                            <p className={'item-list-element-title'}>{item.title}</p>
                                                            <p className={'item-list-element-content'}>
                                                                {item.content}
                                                            </p>
                                                        </div>
                                                    </div>
                                                })
                                            }

                                        </div>
                                    </div>
                                    <div className={'first-item'}>
                                        <p className={'item-title'}>入驻条件</p>
                                        <ul className={'item-list-ul'}>
                                            <li className={'item-li'} style={{ marginBottom: 39 }}>
                                                <div className={'list-pie'} />
                                                <span className={'flex-1'}>
                                                    有优质的教学产品，并在所在地拥有品牌知名度、美誉度，有完善的师资复制体系、
                                                    课程体系、教学产品具有市场竞争力，有稳定强大的核心运营团队；
                                                        </span>
                                            </li>
                                            <li className={'item-li'} style={{ marginBottom: 39 }}>
                                                <div className={'list-pie'} />
                                                <span className={'flex-1'}>
                                                    具有一定经营能力和抗风险能力的机构、企业或个人；
                                                    </span>
                                            </li>
                                            <li className={'item-li'} style={{ marginBottom: 39 }}>
                                                <div className={'list-pie'} />
                                                <span className={'flex-1'}>
                                                    从事教育事业3年以上（机构需营业3年以上），如果是加盟品牌，加盟的品牌需在全国范围内拥有知名度；
                                                    </span>
                                            </li>
                                            <li className={'item-li'}>
                                                <div className={'list-pie'} />
                                                <span className={'flex-1'}>
                                                    认同豆壳教育广场的经营理念和管理规则。
                                                    </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                    : <div>
                                        <div className={'first-item'}>
                                            <p className={'item-title'}>全国地产空间合作</p>
                                            <p className={'item-detail'}>
                                                豆壳教育广场正在中国市场寻求优质的地产合作伙伴，依托豆壳教育广场丰富的教育经营经验及专业的教育技术研发能力，接入标准化服务配套，包括：智能空间设计、智能管理系统、教育运营系统三大核心产品。
                                                除以上，豆壳教育广场有自主完善的招商入驻系统，一体化完成教育品牌的招募，为周边居民打造一站式的学习成长陪伴空间。
                                            </p>
                                        </div>
                                        <div className={'first-item'}>
                                            <p className={'item-title'}>筛选条件</p>
                                            <ul>
                                                <li className={'item-li'} style={{ marginBottom: 39 }}>
                                                    <div className={'list-pie'} />
                                                    <span className={'flex-1'}>
                                                    面向全国，十城（成都、重庆、武汉、长沙、西安、郑州、南京、贵阳、苏州、北京）优先，幼儿园及小学密集的社区商业体或临街商业；
                                                    </span>
                                                </li>
                                                <li className={'item-li'} style={{ marginBottom: 39 }}>
                                                    <div className={'list-pie'} />
                                                    <span className={'flex-1'}>
                                                        房屋具备合法手续，产权清晰，办理了产权证及规划许可证，规划使用性质为商业，取得了一次消防验收；
                                                    </span>
                                                </li>
                                                <li className={'item-li'} style={{ marginBottom: 39 }}>
                                                    <div className={'list-pie'} />
                                                    <span className={'flex-1'}>
                                                        楼层要求在1-3层，结构层高高于3.5米；
                                                    </span>
                                                </li>
                                                <li className={'item-li'} style={{ marginBottom: 39 }}>
                                                    <div className={'list-pie'} />
                                                    <span className={'flex-1'}>
                                                        建筑面积3,000 ㎡以上；
                                                    </span>
                                                </li>
                                                <li className={'item-li'}>
                                                    <div className={'list-pie'} />
                                                    <span className={'flex-1'}>
                                                        合作周期在8年以上。
                                                    </span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                            }

                        </div>
                        <div className={'form-container'}>
                            <div className={'form-container-title'}>
                                <span className={'form-container-title-left'}>意向申请</span>
                                <span className={'form-container-title-right'}>{this.state.activeKey == '1' ? '选择比努力更重要' : '用教育链接未来'}</span>
                            </div>
                            <div className={'form-container-form'}>
                                <Form>
                                    <FormItem>
                                        {
                                            getFieldDecorator("name",{
                                                rules:[{required:true,message:'请输入姓名'}],
                                            })(
                                        <Input className={'form-container-input'} placeholder={'姓名'}/>
                                            )}
                                    </FormItem>
                                    <FormItem>
                                        {
                                            getFieldDecorator("phone",{
                                                rules:[
                                                    {required:true,message:'请输入手机'},
                                                    { pattern: /^1[3|4|5|7|8][0-9]\d{8}$/, message: '请输入正确的手机号码' },
                                                    ],

                                            })(
                                        <Input maxLength = {11} className={'form-container-input'} placeholder={'手机'}/>
                                            )}
                                    </FormItem>
                                    {
                                        this.state.activeKey == '1' ?
                                            <FormItem>
                                                {
                                                    getFieldDecorator("brand",{
                                                        rules:[{required:true,message:'请输入品牌名称'}],
                                                    })(
                                                <Input className={'form-container-input'} placeholder={'品牌名称'}/>
                                                    )}
                                            </FormItem>
                                                    :
                                            <FormItem>
                                                {
                                                    getFieldDecorator("address",{
                                                        rules:[{required:true,message:'请输入空间位置'}],
                                                    })(
                                                <Input className={'form-container-input'} placeholder={'空间位置'}/>
                                                    )}
                                            </FormItem>
                                    }
                                    {
                                        this.state.activeKey == '1' ?
                                            <FormItem>
                                                {
                                                    getFieldDecorator("category",{
                                                        rules:[{required:true,message:'请输入经营类目'}],
                                                    })(
                                                <Input className={'form-container-input'} placeholder={'经营类目'}/>
                                                    )}
                                            </FormItem> :
                                            <FormItem>
                                                {
                                                    getFieldDecorator("company",{
                                                        rules:[{required:true,message:'请输入企业名称'}],
                                                    })(
                                                <Input className={'form-container-input'} placeholder={'企业名称'}/>
                                                    )}
                                            </FormItem>
                                    }

                                    <FormItem>
                                        {
                                            getFieldDecorator("remarks",{
                                            })(
                                        <TextArea maxLength={100} className={'form-container-textarea'} placeholder={'给我们留言（选填）限100字内'}/>
                                            )}
                                    </FormItem>
                                    <button className={'form-container-button'} onClick={this.submitHandler}>
                                        提交意向申请
                                    </button>
                                </Form>
                            </div>
                        </div>
                    </div>
                </div>
                <Modal 
                    title = {null}
                    footer = {null}
                    closable = {false}
                    visible = {visible}>
                    <div className = "nice-wrapper">
                        <img className = "nice-img" src={zan} alt=""/>
                        <span>提交申请成功！我们将尽快与您联系，请耐心等候。</span> 
                    </div>
                    <div className="nice-btn-wrapper">
                        <button onClick = {this.cancel}>知道了</button>
                    </div>
                </Modal>
            </Layout>
        )
    }
}
const T = Form.create()(Index);
export default T;